<script lang="tsx" setup>
import { ref } from 'vue'
import { NButton, NCard, NForm, NFormItem, NInput, useMessage } from 'naive-ui'
import { useRouter } from 'vue-router'
import * as GlobalAPI from '@/api'
import JSEncrypt from 'jsencrypt';
import LoadingIcon from '@/components/LoadingIcon/index.vue';

const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
  '2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
// 定义表单数据
const form = ref({
    username: 'admin',
    password: '123456'
})
const formRef = ref(null)
const message = useMessage()
const router = useRouter()
const userStore = useUserStore()
    // 加密函数
    const encryptData = (data) => {
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(publicKey);
      const encrypted = encrypt.encrypt(JSON.stringify(data));
      
      if (!encrypted) {
        throw new Error('加密失败，请检查公钥格式');
      }
      
      return encrypted;
    };
onMounted(() => {
    // 获取用户信息，如果已经登录，则直接跳转首页
    // if (userStore.isLoggedIn) {
    //     router.push('/')
    // }
})
const  isLoggedIn = ref(false)
// 登录处理函数
const handleLogin = () => {
    
    if (form.value.username && form.value.password) {
        // form.value.password=encryptData(form.value.password)
        let password = JSON.parse(JSON.stringify(form.value.password)) 
        // password=password
        console.log(password,'encryptData(form.value.password)')
        password=encryptData(password)
        isLoggedIn.value = true
        GlobalAPI.login(form.value.username, password).then(
            async (res) => {
                console.log(res, 'res')
                if (res.body) {
                    const responseData = await res.json() // 解析为JSON对象
                    console.log(responseData, 'responseData')
                    if (res.status == 200) {
                        const user = {
                            token: responseData.token,
                            userInfo: responseData.user.user,
                          
                        }
                        // 存储用户信息到 store
                        userStore.login(user)
                        // isLoggedIn.value = false
                        message.success('登录成功')

                        setTimeout(() => {
                            router.push('/')
                        }, 500) // 2000毫秒等于2秒
                    } else {
                        isLoggedIn.value = false
                        message.error('登录失败，请检查用户名或密码')
                    }
                }
            }
        )
    } else {
        message.error('请填写完整信息')
    }
}
</script>

<template>
    <div class="login-container">
        <transition name="fade" mode="out-in">
      
            <div class="login-card">
   
      <div>
        <img src="@/assets/images/login.png" alt="">
    </div>
 <div class="login-card-area">
    <!-- <h2 >User Login</h2> -->
    <div class="input-group">
        <label for="username">用户名</label>
        <n-input v-model:value="form.username" placeholder="请输入用户名" default-value="admin"/>
      </div>
      
      <div class="input-group">
        <label for="password">密码</label>
        <n-input v-model:value="form.password" type="password" placeholder="请输入密码"/>
      </div>
      <button class="submit-btn" @click="handleLogin">
        <span class="btn-text" >
      
       {{isLoggedIn?'登录中':'登录'}}
          </span>
        
          <LoadingIcon :active="isLoggedIn" />
      </button>
 </div>
    </div>
        </transition>
    </div>
</template>

<style scoped>
/* 保持原有的样式 */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使容器高度为视口高度 */
    /* background: linear-gradient(to bottom, #5e58e7, white); */
    background-image: url('@/assets/images/background.png');
    background-size: cover;       /* 覆盖整个容器 */
  background-position: center;  /* 图片居中 */
  background-repeat: no-repeat; /* 不重复 */
  background-attachment: fixed; /* 固定背景（可选） */
  height: 100vh;    
}
.login-form{
    background-image: url('@/assets/images/login.png');
    background-size: cover;       /* 覆盖整个容器 */
  background-position: center;  /* 图片居中 */
  background-repeat: no-repeat; /* 不重复 */
  background-attachment: fixed; /* 固定背景（可选） */
  height: 30vh; 
}
body,
html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
}

/* 添加新的动画样式 */

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
}
.login-card {
    display: flex;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 2px 1px 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  padding: 40px;

  margin: 0 auto;
}

.login-card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.08);
}

.login-card h2 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}
.login-card-area{
    width: 280px;
    margin-left: 15px;
}
.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 500;
}

.input-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: all 0.3s;
}

.input-group input:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
  outline: none;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.forgot-password {
  color: #4a90e2;
  text-decoration: none;
  font-size: 14px;
}

.forgot-password:hover {
  text-decoration: underline;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #6a86f7;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn:hover {
  background-color: #6a86f7;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.submit-btn:active {
  transform: translateY(0);
}



.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-text {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.btn-text-hidden {
  opacity: 0;
}
</style>
